<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册</title>
    <style>
        li {
            list-style: none;
        }
        body {
            background-image: url("https://aigc-image.bj.bcebos.com/miaobi/5mao/b%275LiK6Iy25bGxXzE3MjUyNDI1MDAuODU4MDU2NV8xNzI1MjQyNTAxLjUxMjQ2NzY%3D%27/1.png");
            background-repeat: no-repeat;
            background-position: center;
            background-size: cover;
            background-attachment: fixed;
            margin: 0;
        }
        

        div {
            width: 350px;
            height: 200px;
            background-color: aquamarine;
            position: absolute;
            top: 30%;
            left: calc((100% - 350px)/2);
        }

        span {
            /* text-align: center; */
            color: red;
        }

        .hide {
            display: none;
        }

        button {
            position: absolute;
            height: 40px;
            bottom: 5%;
            left: calc((100% - 70px)/2);
        }
    </style>
</head>

<body>
    <div>
        <!--密码正则:必须由字母和数字组成,长度5~8位  ^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{5,8}$ -->
        <ul>
            <li>&emsp;&emsp;账号:<input type="text"></li>
            <span class="hide">请输入账号</span>
            <li>&emsp;&emsp;密码:<input type="text"></li>
            <span class="hide">密码必须由字母和数字组成,长度5~8位</span>
            <li>确认密码:<input type="text"></li>
            <span class="hide">必须和密码相同</span>
            <li><button>确认注册</button></li>
        </ul>
    </div>
    <script>
        let inps = [...document.querySelectorAll(`input`)]
        let spans = document.querySelectorAll(`span`)
        let zz = /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{5,8}$/

        document.querySelector(`button`).addEventListener('click', () => {
            let is = zz.test(inps[1].value)
            if (inps[1].value == inps[2].value && is) {
                let user_obj = {
                    userAccount: inps[0].value,
                    userCypher: inps[1].value,
                    inp1:false,
                    inp2:false
                }
                localStorage.setItem('userData',JSON.stringify(user_obj))
                location.assign(`./登录.html`)
            } else {
                spans.forEach(item => {
                    item.classList.remove(`hide`)
                })
            }
        })
    </script>
</body>

</html>